<template>
  <el-container>
    <el-main>
      <el-row :gutter="20">
        <el-col :gutter="20">
          <el-col :span="24">
            <el-card shadow="hover">
              <h2>元曲知识科普</h2>
              <p>元曲是盛行于元代的一种文艺形式，包括杂剧和散曲，著名的曲作家有关汉卿、马致远等。</p>
            </el-card>
          </el-col>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 20px;">
        <el-col v-for="poem in poems" :key="poem.title" :span="8">
          <el-card shadow="hover">
            <h2>{{ poem.title }}</h2>
            <p>{{ poem.author }}</p>
            <p>{{ poem.content }}</p>
            <el-button type="text" @click="showDetails(poem)">查看详情</el-button>
          </el-card>
        </el-col>
      </el-row>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[3, 6, 9]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="poems.length"
      ></el-pagination>
      <el-dialog v-model="dialogVisible" title="元曲详情">
        <h2>{{ currentPoem.title }}</h2>
        <p>{{ currentPoem.author }}</p>
        <p>{{ currentPoem.content }}</p>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref } from 'vue';

const poems = ref([
  { title: '天净沙·秋思', author: '马致远', content: '枯藤老树昏鸦，小桥流水人家，古道西风瘦马。夕阳西下，断肠人在天涯。' },
  { title: '山坡羊·潼关怀古', author: '张养浩', content: '峰峦如聚，波涛如怒，山河表里潼关路。望西都，意踌躇。伤心秦汉经行处，宫阙万间都做了土。兴，百姓苦；亡，百姓苦。' },
  { title: '夜行船·秋思', author: '马致远', content: '百岁光阴一梦蝶，重回首往事堪嗟。今日春来，明朝花谢。急罚盏夜阑灯灭。' },
  { title: '窦娥冤·滚绣球', author: '关汉卿', content: '有日月朝暮悬'},
  { title: '沉醉东风·渔夫', author: '白朴', content: '黄芦岸白蘋渡口，绿柳堤红蓼滩头。虽无刎颈交，却有忘机友，点秋江白鹭沙鸥。傲杀人间万户侯，不识字烟波钓叟。' },
  { title: '四块玉·别情', author: '关汉卿', content: '自送别，心难舍，一点相思几时绝？凭阑袖拂杨花雪。溪又斜，山又遮，人去也。有鬼神掌着生死权。天地也！只合把清浊分辨，可怎生糊突了盗跖、颜渊？为善的受贫穷更命短，造恶的享富贵又寿延。天地也！做得个怕硬欺软，却原来也般顺水推船！地也，你不分好歹何为地？天也，你错勘贤愚枉做天！哎，只落得两泪涟涟。' }
]);

const currentPage = ref(1);
const pageSize = ref(3);
const dialogVisible = ref(false);
const currentPoem = ref({});

const showDetails = (poem) => {
  currentPoem.value = poem;
  dialogVisible.value = true;
};

const handleSizeChange = (val) => {
  pageSize.value = val;
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
};
</script>

<style scoped>
/* 这里可以添加具有元朝风格的 CSS 样式 */
.el-card {
  background-color: #f9f5e7;
  border-color: #d4b996;
}

.el-card__header {
  background-color: #e9dac1;
  border-bottom-color: #d4b996;
}
</style>

const poems = ref([
  { title: '天净沙·秋思', author: '马致远', content: '枯藤老树昏鸦，小桥流水人家，古道西风瘦马。夕阳西下，断肠人在天涯。' },
  { title: '山坡羊·潼关怀古', author: '张养浩', content: '峰峦如聚，波涛如怒，山河表里潼关路。望西都，意踌躇。伤心秦汉经行处，宫阙万间都做了土。兴，百姓苦；亡，百姓苦。' },
  { title: '夜行船·秋思', author: '马致远', content: '百岁光阴一梦蝶，重回首往事堪嗟。今日春来，明朝花谢。急罚盏夜阑灯灭。' },
  { title: '窦娥冤·滚绣球', author: '关汉卿', content: '有日月朝暮悬',
  { title: '沉醉东风·渔夫', author: '白朴', content: '黄芦岸白蘋渡口，绿柳堤红蓼滩头。虽无刎颈交，却有忘机友，点秋江白鹭沙鸥。傲杀人间万户侯，不识字烟波钓叟。' },
  { title: '四块玉·别情', author: '关汉卿', content: '自送别，心难舍，一点相思几时绝？凭阑袖拂杨花雪。溪又斜，山又遮，人去也。' }，有鬼神掌着生死权。天地也！只合把清浊分辨，可怎生糊突了盗跖、颜渊？为善的受贫穷更命短，造恶的享富贵又寿延。天地也！做得个怕硬欺软，却原来也般顺水推船！地也，你不分好歹何为地？天也，你错勘贤愚枉做天！哎，只落得两泪涟涟。' }
]);

const currentPage = ref(1);
const pageSize = ref(3);
const dialogVisible = ref(false);
const currentPoem = ref({});

const showDetails = (poem) => {
  currentPoem.value = poem;
  dialogVisible.value = true;
};

const handleSizeChange = (val) => {
  pageSize.value = val;
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
};

const charts = {
  title: { text: '元曲作者分布' },
  tooltip: {},
  xAxis: { data: ['马致远', '张养浩', '关汉卿'] },
  yAxis: {},
  series: [{
    name: '数量',
    type: 'bar',
    data: [2, 1, 1]
  }]
  };